import { RJSFSchema, WidgetProps } from '@rjsf/utils';
import { MouseActionInput } from '../pick-input/mouse-action-input';
import { userEvents } from '@app-base/module';
import { PickInputEvents } from '../pick-input/types';
import { Icon } from '@amcax/base';

export const SurfacePicker = (props: WidgetProps<any, RJSFSchema, any>) => {
  const { value, onChange } = props;

  return (
    <MouseActionInput
      onActiveFocus={() => {
        const unRegister = () => {
          userEvents.off(PickInputEvents.Input3dFocused);
        };
        unRegister();
        userEvents.emit(PickInputEvents.Input3dFocused);
        userEvents.on(PickInputEvents.Input3dFocused, unRegister);
        props.onFocus?.(props.id, null);
      }}
      onActiveBlur={() => props.onBlur?.(props.id, null)}
      blurOnClickOut
      placeholder={props.placeholder}
    >
      {props.value == null ? (
        ''
      ) : (
        <>
          {value?.map((i: number) => (
            <div className='flex justify-between'>
              <div>临时面{i + 1}</div>
              <div
                className={'ml-auto'}
                onClick={() => {
                  const newRegion = value?.filter((num) => num !== i);
                  onChange(newRegion);
                }}
              >
                <Icon
                  tabIndex={0}
                  name='commons/close'
                />
              </div>
            </div>
          ))}
        </>
      )}
    </MouseActionInput>
  );
};
